<template>
  <view class="job-item" @click="handleItem(item)">
    <view class="item-top">
      <text class="title">{{ item[props.title] }}</text>
      <text class="salary">{{ item[props.salary] }}</text>
    </view>
    <view class="item-middle u-border-bottom u-p-b-20 u-m-b-20">
      <view class="item-middle-line">
        <view class="item-middle-line-item"
          ><text class="icon icon-edu"></text
          ><text>{{ item[props.edus] || '学历不限' }}</text></view
        >
        <view v-if="item[props.gznum]" class="item-middle-line-item"
          ><text class="icon icon-gznum"></text>
          <text> {{ item[props.gznum] }}</text></view
        >

        <view v-if="item[props.region]" class="item-middle-line-item"
          ><text class="icon icon-region"></text
          ><text>{{ item[props.region] }}</text></view
        >
      </view>
      <view class="item-middle-line fldy">
        <text
          class="fldy-item"
          v-for="(flItem, index) in item[props.fldy]"
          :key="index"
        >
          {{ flItem }}
        </text>
      </view>
    </view>
    <view class="item-bottom">
      <view class="company">
        <u-image
          width="40"
          height="40"
          :src="item[props.logo]"
          mode="aspectFill"
          shape="circle"
        ></u-image>
        <text class="cname u-m-l-20">{{ item[props.cname] }}</text>
      </view>
      <text class="yuangong">{{ item[props.yuangong] }}</text>
    </view>
    <view v-if="item[props.valid] == 0" class="record-flag"></view>

    <slot></slot>
  </view>
</template>

<script>
export default {
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
    zpid: {
      type: [String, Number],
      default: "",
    },
    props: {
      type: Object,
      default() {
        return {
          title: "jtzw",
          salary: "salary",
          cname: "cname",
          time: "time",
          region: "region",
          fldy: "fldy",
          gznum: "gznum",
          edus: "edus",
          jobtypes: "jobtypes",
          yuangong: "yuangong",
          logo: "logo",
          valid: 'valid',
        };
      },
    },
  },
  methods: {
    handleItem(item) {
      this.$emit("itemClick", item);
    },
  },
};
</script>

<style lang="scss">
$img-base-jdetail: $img-base + "jdetail/";
$img-base-deliveryRecord: $img-base + "deliveryRecord/";
.job-item {
  position: relative;
  margin-bottom: 24rpx;
  padding: 32rpx;
  background: $uni-bg-color;
  border-radius: 20rpx;
  box-shadow: 0 17rpx 15rpx 5rpx #f3f3f3;
  .item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $uni-font-size-lg;
    line-height: $uni-font-size-lg;
    font-weight: bold;
    .title {
      flex-grow: 1;
      margin-right: 24rpx;
      line-height: 1.5;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
    .salary {
      flex-shrink: 0;
      color: $u-type-primary;
    }
  }
  .item-middle {
    margin-top: 28rpx;
    font-size: $uni-font-size-sm;
    line-height: $uni-font-size-sm;

    &-line {
      margin-bottom: 24rpx;
      color: $uni-text-color-999;
      &.cname {
        display: flex;
        font-size: $uni-font-size-base;

        .cname-name {
          flex: 1;
          width: 0rpx;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .yuangong {
          flex-shrink: 0;
          margin-left: 24rpx;
        }
      }
      &-item {
        display: inline-flex;
        align-items: center;
        margin-right: 16rpx;
        padding: 4rpx 10rpx;
        border-radius: $uni-border-radius-sm;
        color: #666666;
        background-color: $uni-bg-color-border-f1;
      }
    }
    .icon {
      display: inline-block;
      width: 23rpx;
      height: 23rpx;
      margin-right: 6rpx;

      &-gznum {
        background: url($img-base-jdetail + "exp.png") no-repeat center / 100%
          100%;
      }
      &-edu {
        background: url($img-base-jdetail + "edu.png") no-repeat center / 100%
          100%;
      }
      &-region {
        background: url($img-base-jdetail + "region.png") no-repeat center /
          100% 100%;
      }
    }
  }
  .fldy {
    margin: 10rpx 0 0 0;
    &-item {
      display: inline-block;
      margin: 0 18rpx 8rpx 0;
      padding: 4rpx 10rpx;
      border-radius: $uni-border-radius-sm;
      color: $u-type-primary;
      background-color: $bg-color-button;
    }
  }
  .item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: $uni-font-size-sm;
    color: $uni-text-color-999;
    .company {
      display: inline-flex;
      align-items: center;
    }
    .yuangong {
      flex-shrink: 0;
    }
  }
  .record-flag {
    position: absolute;
    width: 73rpx;
    height: 73rpx;
    right: 32rpx;
    top: 70rpx;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto;
    background-image: url($img-base-deliveryRecord + 'invalid.png');
  }
}
</style>